<template>
    <div>
        <!-- 头部刷新区域 -->
        <div class="setdiv">
            <span>账号设置</span>
            <el-button class="refreshRight" plain icon="el-icon-refresh" @click="fresh">刷新</el-button>
        </div>
        <!-- 卡片视图区域 -->
        <el-card class="box-card">
            <div slot="header" class="clearfix getColor">
                <span>账号设置</span>
            </div>
            <!-- 头像上传区域 -->
            <div>
                <div class="Head_portrait">
                    <!-- 头像上传 -->
                    <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
                <div class="Head_text">
                    <div>上传头像</div>
                </div>
            </div>
            <!-- 用户信息表单区域 -->
            <div class="content">
                <el-form :model="editData" :rules="rules" ref="ruleForm" label-width="100px">
                    <el-form-item label="管理员:" prop="id">
                        <el-input v-model="editData.id" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="账号:" prop="username">
                        <el-input v-model="editData.username" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="passwords">
                        <el-input v-model="editData.passwords" disabled type="password"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:" prop="name">
                        <el-input v-model="editData.name"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email">
                        <el-input v-model="editData.email"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="phone">
                        <el-input v-model="editData.phone"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" @click="editUser">提交</el-button>
            </div>
        </el-card>
    </div>
</template> 
 <script>
export default {
    data() {
        // 验证邮箱的规则
        var checkEmail = (rule, value, cd) => {
            // 验证邮箱的正则表达式
            const regEmail = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-])+/;
            if (regEmail.test(value)) {
                return cd();
            }
            cd(new Error("请输入合法的邮箱"));
        };
        // 验证手机号的规则
        var checkMobile = (rule, value, cd) => {
            const regMobile = /^1[3|4|5|7|8][0-9]{9}$/;
            if (regMobile.test(value)) {
                return cd();
            }
            cd(new Error("请输入合法的手机号"));
        };
        return {
            imageUrl: "",
            rules: {
                id: [
                    {
                        required: true,
                        message: "请输入账号",
                        trigger: "blur",
                    },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入姓名",
                        trigger: "blur",
                    },
                ],

                email: [
                    {
                        required: true,
                        message: "请输入邮箱",
                        trigger: "blur",
                    },
                    {
                        validator: checkEmail,
                        trigger: "blur",
                    },
                ],
                mobile: [
                    {
                        required: true,
                        message: "请输入手机号",
                        trigger: "blur",
                    },
                    {
                        validator: checkMobile,
                        trigger: "blur",
                    },
                ],
            },
            // 修改的数据
            editData: {
                name: "",
                email: "",
                phone: "",
            },
        };
    },
    created() {
        //获取登录时的数据
        let data = JSON.parse(sessionStorage.getItem("store")).usermsg;
        this.editData = data;
    },
    methods: {
        editUser: function () {
            this.$axios({
                url: "/home/accout",
                data: {
                    name: this.editData.name,
                    email: this.editData.email,
                    phone: this.editData.phone,
                },
                method: "post",
            }).then((res) => {
                if (res.data.code !== 200) {
                    this.$message("修改失败", error);
                }
                if (res.data.code == 200) {
                    this.$message("修改成功", "success");
                }
            });
            // console.log(s)
        },
        // 刷新
        fresh() {
            this.$message({
                message: "已刷新",
                type: "success",
            });
        },
        // 上传头像的事件
        handleAvatarSuccess(res, file) {
            this.imageUrl = URL.createObjectURL(file.raw);
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === "image/jpeg";
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error("上传头像图片只能是 JPG 格式!");
            }
            if (!isLt2M) {
                this.$message.error("上传头像图片大小不能超过 2MB!");
            }
            return isJPG && isLt2M;
        },
    },
};
</script> 
<style lang="less" scoped>
.setdiv {
    background-color: #f2f2f2;
    padding: 17.5px 0;
    position: relative;
}
.setdiv > span {
    margin-left: 20px;
}
.refreshRight {
    position: absolute;
    right: 20px;
    top: 8px;
}
.el-card {
    margin-top: 20px;
}
.set {
    background-color: #f2f2f2;
    padding: 0;
}
.el-card > .set {
    padding: 0;
}
.clearfix > span {
    padding: 0 !important;
}
.el-card /deep/ .el-card__header {
    background-color: #f2f2f2;
}
// 头像上传
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}
.avatar {
    width: 178px;
    height: 178px;
    display: block;
    border-radius: 50%;
    text-align: center;
}
.Head_portrait {
    margin: auto;
    width: 100%;
    text-align: center;
}
.Head_text {
    margin: auto;
    width: 20%;
    text-align: center;
    color: #0099ff;
}
.el-form {
    width: 35%;
    margin: auto;
    margin-top: 30px;
}
.content {
    text-align: center;
}
</style> 

